<template>
  <div class="recommendlist">
    <Cover :coverImgUrl=coverImgUrl :title=title :portrait=portrait :nickname=nickname :playCount=playCount></Cover>
    <div class="list">
      <BorderTitle >歌曲列表</BorderTitle>
      <!-- <div>歌曲列表</div> -->
     
       <ul v-if="showList">
      <MusicList v-for="(item,index) in showList" :key="item.id" :item="item" :index="index"  :songs="showList" @play="$emit('play',$event)">{{index+1}}</MusicList>
    </ul>
<Loading v-if="showList.length==0"></Loading>
    </div>
      <BorderTitle >最新评论</BorderTitle>


  <!-- <Comment></Comment> -->
  
     <ul v-if="showComment">
      <Comment v-for="(item) in showComment" :key="item.id" :item="item"></Comment>
    </ul>
  </div>

</template>
<script>
import Cover from "@/components/Cover"
import BorderTitle from '@/components/BorderTitle'

import MusicList from '@/components/MusicList'
import Loading from '@/components/Loading'
import Comment from '@/components/Comment'

export default {
  name: 'RecommendList',
  data(){
    return{
      list:[],
       hotList: [],
      showList: [],
      showComment: [],
      coverImgUrl:'',//封面
      title:'',
      portrait:'',//头像
      nickname:'',
      playCount:Number
    }
  },
  props:['id'],
  components:{
    Cover,
    MusicList,
    Loading,
    Comment,
    BorderTitle
  },

      created() {
        //获取歌单列表
    this.axios.get(`https://music.kele8.cn/playlist/detail?id=${this.id}`).then((dlist) => {
     this.coverImgUrl=dlist.data.playlist.coverImgUrl;
      this.title=dlist.data.playlist.name;
      this.portrait=dlist.data.playlist.creator.avatarUrl;
      this.nickname=dlist.data.playlist.creator.nickname;
      this.playCount=dlist.data.playlist.playCount;
      this.hotList = dlist.data.playlist.tracks.map((d,index) => {
        let data = d;
        data.song = {
          album: {
            name:d.al.name,
            artists:d.ar
          },
          privilege: {
            playMaxbr: dlist.data.privileges[index].playMaxbr,
          },
          
        };

        return data;
      });

      this.showList=this.hotList.slice(0,20)
    });

        //获取评论列表
        this.axios.get(`https://music.kele8.cn/comment/playlist?id=${this.id}`).then((d) => {
   
          // console.log(d.data.comments)
          this.showComment=d.data.comments

    });
  },
  
}
</script>
<style lang="less" scoped>
.recommendlist{
  margin-top: -40px;
  .list{
    div{
      // background-color: blue;
      color: #666666;
      font-size: 12px;
      padding: 10px;
    }
  }
}
</style>